条件渲染
条件渲染
在 Vue3 中,可以使用v-if
、v-else
、v-else-if
和v-show
指令来实现条件渲染
使用v-if
实现条件渲染
html
<template>
<div>
<h1 v-if="isVisible">Hello, Vue3!</h1>
<button @click="toggleVisibility">Toggle Visibility</button>
</div>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const isVisible = ref(true);
function toggleVisibility() {
isVisible.value = !isVisible.value;
}
return { isVisible, toggleVisibility };
},
};
</script>
在这个例子中,当isVisible
为true
时,显示 "Hello, Vue3!",否则不显示。点击按钮可以切换isVisible
的值。
注意事项:
v-if
指令后面的表达式需要返回一个布尔值。- 如果需要更复杂的条件判断,可以使用计算属性或者方法。
使用v-else
实现条件渲染
html
<template>
<div>
<h1 v-if="isVisible">Hello, Vue3!</h1>
<h1 v-else>Hello, World!</h1>
<button @click="toggleVisibility">Toggle Visibility</button>
</div>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const isVisible = ref(true);
function toggleVisibility() {
isVisible.value = !isVisible.value;
}
return { isVisible, toggleVisibility };
},
};
</script>
在这个例子中,当isVisible
为true
时,显示 "Hello, Vue3!",否则显示 "Hello, World!"。点击按钮可以切换isVisible
的值。
注意事项:
v-else
必须紧跟在v-if
或v-else-if
之后。- 如果需要更复杂的条件判断,可以使用计算属性或者方法。
使用v-else-if
实现条件渲染
html
<template>
<div>
<h1 v-if="isVisible">Hello, Vue3!</h1>
<h1 v-else-if="isGreeting">Hello, User!</h1>
<h1 v-else>Hello, World!</h1>
<button @click="toggleVisibility">Toggle Visibility</button>
</div>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const isVisible = ref(true);
const isGreeting = ref(false);
function toggleVisibility() {
isVisible.value = !isVisible.value;
}
function setGreeting() {
isGreeting.value = !isGreeting.value;
}
return { isVisible, isGreeting, toggleVisibility, setGreeting };
},
};
</script>
在这个例子中,当isVisible
为true
时,显示 "Hello, Vue3!",当isGreeting
为true
时,显示 "Hello, User!",否则显示 "Hello, World!"。点击按钮可以切换isVisible
和isGreeting
的值。同时,可以通过调用setGreeting
方法来改变isGreeting
的值。
注意事项:
v-else-if
必须紧跟在v-if
或v-else-if
之后。- 如果需要更复杂的条件判断,可以使用计算属性或者方法。
与v-show
的对比
v-if
和v-show
都可以实现条件渲染,但它们的实现方式不同。v-if
通过改变元素的 CSS 样式(通过display
属性)来实现条件渲染,而v-show
只是简单地改变元素的 CSS 样式。因此,如果需要频繁地切换显示/隐藏状态,建议使用v-if
。